<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--
axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios.get(地址).then(function(response){},function(err){})

axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

1. axios必须先导入才可以使用
2. 使用get或post方法即可发送对应的请求
3. then方法中的回调函数会在请求成功或失败时触发
4. 通过回调函数的形参可以获取响应内容,或错误信息

-->
<div id="app">
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    /*
          接口1:随机笑话
          请求地址:https://autumnfish.cn/api/joke/list
          请求方法:get
          请求参数:num(笑话条数,数字)
          响应内容:随机笑话
      */
    document.querySelector(".get").onclick = function () {
        axios.get("https://autumnfish.cn/api/joke/list?num=6").then(function (response) {
            console.log(response);
        },function (err) {
            console.log(err);
        });
    }

    /*
           接口2:用户注册
           请求地址:https://autumnfish.cn/api/user/reg
           请求方法:post
           请求参数:username(用户名,字符串)
           响应内容:注册成功或失败
       */
    document.querySelector(".post").onclick = function () {
        axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
            .then(function(response){
                console.log(response);
                console.log(this.skill);
            },function (err) {
                console.log(err);
            })
    }
</script>
</html>